<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:mc="http://java.sun.com/jsf/composite/mycomponents"
      xmlns:c="http://java.sun.com/jsf/core">

   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="description" content="Mensch ärgere dich nicht Spiel."/>
        <meta name="keywords" content="Spiel Mensch ärgere dich nicht"/>

     
        <title>Mensch ärgere dich nicht!</title>
    </head>
	<body>
		<ui:composition template="./template.xhtml">
		<ui:define name="quicklinks">
			<ul class="accessibility">
				<li><a href="#navigation" accesskey="2">Navigation</a></li>
				<li><a href="#board" accesskey="0">Spielbrett</a></li>
				<li><a href="#dicearea" accesskey="1">W&uuml;rfel</a></li>
				<li><a href="#info_area" accesskey="3">Spielstand</a></li>
			</ul>
		</ui:define>
		
		<ui:define name="navigation">
			<h2 class="accessibility">Navigation</h2>
			<ul>
				<li><a href="#">#{msg.changeuserdata}</a></li>
				<li><a href="#">#{msg.backtolounge}</a></li>
				<li><h:commandLink action="#{gameSessionListener.destroySession()}">#{msg.logout}</h:commandLink></li>
			</ul>
		</ui:define>
		
		<ui:define name="main">
		<h:form id="restartGameButton">
			<h:commandButton rendered="${gameController.game.gameOver}" value="#{msg.restartgame}" action="${gameController.restartGame}"/>
		</h:form>
				<h:panelGroup id="info_area" layout="block">
					<h2>Spielinformationen</h2>
					<table class="game_info" summary="Diese Tabelle zeigt Informationen zum aktuellen Spiel">
						<tbody>
							<tr class="accessibility">
								<th>Information</th>
								<th>Wert</th>
							</tr>
							<tr>
								<th>Anzahl Spieler</th>
								<td>${gameController.game.playerCount}</td>
							</tr>
							<tr>
								<th>Führender</th>
								<td>${gameController.game.leader.userName}</td>
							</tr>
							<tr>
								<th>Aktuelle Runde</th>
								<td>${gameController.game.round}</td>
							</tr>
							<tr>
								<th>Zeit</th>
								<td>${gameController.game.spentTime}</td>
							</tr>
						</tbody>
					</table>
					<h2>Spieler</h2>
					<table class="game_info" summary="Diese Tabelle listet die Namen der Spieler auf">
						<tbody>
							<tr class="accessibility">
								<th>Spielernummer</th>
								<th>Spielername</th>
							</tr>
							
							<ui:repeat value="${gameController.game.players}" var="player">
							<tr>
								<th>Spieler ${gameController.game.getPlayerNumber(player)}</th>
								<td>${player.userName}</td>
							</tr>
							</ui:repeat>
							
						</tbody>
					</table>
				</h:panelGroup>
				
				<h:form prependId="false" id="formDice">
				<h:panelGroup layout="block" id="dicearea" >
					<hr class="accessibility" />
					<h2 class="accessibility">Würfel</h2>
					<span title='aktueller Spieler'>${gameController.game.currentPlayer.userName}</span>
					
					<h:commandLink id="dothedice" action="#{gameController.game.rollthedice(gameController.game.currentPlayer)}">
					<c:ajax render=":info_area :play_area :infogegner :restartGameButton dicearea" />
						<img id="dice" name="wuerfel" title="Würfel Zahl ${gameController.game.currentPlayer.lastDiceResult}" src="resources/img/wuerfel${gameController.game.currentPlayer.lastDiceResult}.png" 
							alt="Würfel Zahl ${gameController.game.currentPlayer.lastDiceResult}"/>
					</h:commandLink>
				</h:panelGroup>
				</h:form>
				<h:panelGroup id="play_area" display="block">
					<hr class="accessibility" />
					<div id="board">
						<h2 class="accessibility">Spielbrett</h2>
						<div class="fields">
							<h3 class="accessibility">Spielfelder</h3>
							<ol title="Spielfelder">
								<ui:repeat value="${gameController.game.gameFields}" var="field">
									<li>  
										<img id='field${field.id}' src='resources/img/field${gameController.game.getPlayerField(field.id)}${gameController.game.getOccuppiedByPlayer(field.id)}.png' alt='#{msg.field}${field.id}' title='#{msg.field}${field.id}' />
									</li>
								</ui:repeat>
							</ol>
							<h3 class="accessibility">Starth&auml;user</h3>
							<ol title="Starthaus Spieler 1">
								<ui:repeat value="${gameController.game.homePlayerOneFields}" var="field">
								<li><img id='field${field.id}' src='resources/img/field1${gameController.game.getOccuppiedByPlayer(field.id)}.png' alt='Feld ${field.id}: Startfeld Spieler 1' title='Feld ${field.id}: Startfeld Spieler 1' /></li>
								</ui:repeat>
							</ol>
							<ol title="Starthaus Spieler 2">
								<ui:repeat value="${gameController.game.homePlayerTwoFields}" var="field">
								<li><img id='field${field.id}' src='resources/img/field2${gameController.game.getOccuppiedByPlayer(field.id)}.png' alt='Feld ${field.id}: Startfeld Spieler 2' title='Feld ${field.id}: Startfeld Spieler 2' /></li>
								</ui:repeat>
							</ol>
							<ol title="Starthaus Spieler 3">	
								<ui:repeat value="${gameController.game.homePlayerThreeFields}" var="field">
								<li><img id='field${field.id}' src='resources/img/field3${gameController.game.getOccuppiedByPlayer(field.id)}.png' alt='Feld ${field.id}: Startfeld Spieler 3' title='Feld ${field.id}: Startfeld Spieler 3' /></li>
								</ui:repeat>
							</ol>
							<ol title="Starthaus Spieler 4">	
								<ui:repeat value="${gameController.game.homePlayerFourFields}" var="field">
								<li><img id='field${field.id}' src='resources/img/field4${gameController.game.getOccuppiedByPlayer(field.id)}.png' alt='Feld ${field.id}: Startfeld Spieler 4' title='Feld ${field.id}: Startfeld Spieler 4' /></li>
								</ui:repeat>
							</ol>
							<h3 class="accessibility">Zielh&auml;user</h3>
							<ol title="Zielhaus Spieler 1">
								<ui:repeat value="${gameController.game.finishPlayerOneFields}" var="field">
								<li><img id='field${field.id}' src='resources/img/field1${gameController.game.getOccuppiedByPlayer(field.id)}.png' alt='Feld ${field.id}: Zielfeld Spieler 1' title='Feld ${field.id}: Zielfeld Spieler 1' /></li>
								</ui:repeat>
							
							</ol>
							<ol title="Zielhaus Spieler 2">	
							<ui:repeat value="${gameController.game.finishPlayerTwoFields}" var="field">
								<li><img id='field${field.id}' src='resources/img/field2${gameController.game.getOccuppiedByPlayer(field.id)}.png' alt='Feld ${field.id}: Zielfeld Spieler 2' title='Feld ${field.id}: Zielfeld Spieler 2' /></li>
								</ui:repeat>
							</ol>
							<ol title="Zielhaus Spieler 3">		
								<ui:repeat value="${gameController.game.finishPlayerThreeFields}" var="field">
								<li><img id='field${field.id}' src='resources/img/field3${gameController.game.getOccuppiedByPlayer(field.id)}.png' alt='Feld ${field.id}: Zielfeld Spieler 3' title='Feld ${field.id}: Zielfeld Spieler 3' /></li>
								</ui:repeat>
								
							</ol>
							<ol title="Zielhaus Spieler 4">		
								<ui:repeat value="${gameController.game.finishPlayerFourFields}" var="field">
								<li><img id='field${field.id}' src='resources/img/field4${gameController.game.getOccuppiedByPlayer(field.id)}.png' alt='Feld ${field.id}: Zielfeld Spieler 4' title='Feld ${field.id}: Zielfeld Spieler 4' /></li>
								</ui:repeat>
								
							</ol>
						</div>
						<div class="clearer"></div>  
						<div>
						 <h:outputText id="infogegner" value="Würfelergebnis Computer: ${gameController.game.opponentScore}" />
						 </div>
					</div>
				</h:panelGroup>				
		</ui:define>
		</ui:composition>
    </body>
</html>                           